<script>
export default {
  name: "Index",
  data(){
    return{
      // 轮播图片（渲染失败）
      images: [ 'login/logo.png', '高地月亮云.jpg', '森林孤舟.jpg', '樱花少女.jpg', '雨伞女.jpg']
    }
  },
  methods:{
  }
}
</script>

<template>
  <div class="v-page">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
         <van-swipe-item v-for="(image, index) in images" :key="index">
            <img class="imgs" :src="require('@/assets/'+image)" />
        </van-swipe-item>
    </van-swipe>

    <van-card
      tag="hot"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #title>
        <p>计算机与科学社团纳新啦</p>
      </template>
      <template #tags >
        <div class="mt-4">
          <van-tag plain type="danger">研发</van-tag>
          <van-tag plain type="danger">学习</van-tag>
          <van-tag plain type="danger">互帮互阻</van-tag>
        </div>
      </template>
      <template #desc>
        <div>报名联系电话：xxxxxxxxxxx</div>
        <div class="mt-4">报名地址：xxxxxxxxxxx</div>
      </template>
    </van-card>

    <van-card
      tag="hot"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #title>
        <p>河北大学第十届软件大赛开始啦</p>
      </template>
      <template #tags >
        <div class="mt-4">
          <van-tag plain type="danger">Java</van-tag>
          <van-tag plain type="danger">Postgre</van-tag>
        </div>
      </template>
      <template #desc>
        <div>报名联系电话：xxxxxxxxxxx</div>
        <div class="mt-4">报名地址：xxxxxxxxxxx</div>
      </template>
    </van-card>

    <van-card
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #title>
        <p>河北大学第十届软件大赛开始啦</p>
      </template>
      <template #tags >
        <div class="mt-4">
          <van-tag plain type="danger">React</van-tag>
          <van-tag plain type="danger">MongoDB</van-tag>
        </div>
      </template>
      <template #desc>
        <div>报名联系电话：xxxxxxxxxxx</div>
        <div class="mt-4">报名地址：xxxxxxxxxxx</div>
      </template>
    </van-card>

    <van-card
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #title>
        <p>河北大学第十届软件大赛开始啦</p>
      </template>
      <template #tags >
        <div class="mt-4">
          <van-tag plain type="danger">Vue3</van-tag>
          <van-tag plain type="danger">Mysql</van-tag>
        </div>
      </template>
      <template #desc>
        <div>报名联系电话：xxxxxxxxxxx</div>
        <div class="mt-4">报名地址：xxxxxxxxxxx</div>
      </template>
    </van-card>

  </div>
</template>

<style scoped lang="scss">
.v-page{
  width: 100%;
  height: 100%;
  position: relative;

  .my-swipe .van-swipe-item {
    color: #fff;
    // font-size: 20px;
    // line-height: 150px;
    height: 180px;
    // text-align: center;
    background-color: #39a9ed;
  }

  .mt-4{
    margin-top: 4px;
  }

  .van-tag{
    margin-left: 4px;
  }

  .van-tag:first-child{
    margin-left: 0;
  }
}
.imgs{
  width: 100%;
  height: 100%;
}

</style>
